<template>
    <div>
        <!-- 导航栏部分 -->
        <div class="searchTop">
            <van-nav-bar title="商品列表" left-arrow @click-left="onClickLeft" />
        </div>
        <!-- 搜索框部分 -->
        <van-search v-model="value" show-action @search="onSearch" clearable>
            <template #action>
                <div @click="onSearch">
                    <van-icon name="apps-o" />
                </div>
            </template>
        </van-search>
        <!-- 筛选部分 -->
        <div class="filterBox">
            <ul>
                <li>综合</li>
                <li>销量</li>
                <li>价格</li>
            </ul>
        </div>
        <!-- 商品列表部分 -->
        <div class="productList" v-if="ifshow">
            <ProductCard :ProductDate="productList"></ProductCard>
        </div>
        <div class="productList" v-else>
            <div>
                <p style="text-align: center; margin-top: 50px;">暂无相关商品</p>
            </div>
        </div>
    </div>
</template>
<script>
import ProductCard from '@/components/ProductCard.vue'
import { getProList } from '@/api/search'
export default {
    name: 'listIndex',

    data() {
        return {
            value: this.$route.query.keyword || '',
            page: 1,
            //商品列表
            productList: [],
            ifshow: true,
        };
    },
    created() {
        this.getProList()
    },
    mounted() {

    },

    methods: {
        //获取商品列表
        async getProList() {
            let res = await getProList({
                goodsName: this.value,
                page: this.page
            })
            this.productList = res.data.list.data
            console.log(res.data.list.total)
            if (res.data.list.total == 0) {
                this.ifshow = false
            }
            else {
                this.ifshow = true
            }
            console.log(res.data.list.data)
        },
        // 返回上一页
        onClickLeft() {
            this.$router.go(-1);
        },
        onSearch() {
            this.getProList()
        },
    },
};
</script>
<style lang="scss" scoped>
.filterBox {
    ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 40px;
        background: #fff;

        li {
            font-size: 14px;
            color: #333;
        }
    }
}
</style>